<template>
  <div
    class="DBbofang"
    @contextmenu="xiaoshi"
    @mouseleave="mousemove"
  >
    <div class="playbarTao">
      <div class="updn">
        <div class="left">
          <a
            href="javascript:;"
            class="btn"
            @click="guding"
          ></a>
        </div>
        <div class="right">

        </div>
      </div>
      <div class="bg">

      </div>
      <div
        class="hand"
        title="展开播放条"
      >

      </div>
      <div class="wrap">
        <div class="btns">
          <div
            class="yinpingbofang"
            style="position: relative;"
          >
            <audio class="Yping">
              <source
                :src="MusicUrl"
                type="audio/ogg"
              >
            </audio>
          </div>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="prev"
            class="prv"
            title="上一首(ctrl+←)"
          >上一首</a>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="play"
            class="plys"
            title="播放/暂停(p)"
            @click="BF"
          >播放/暂停</a>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="next"
            class="nxt"
            title="下一首(ctrl+→)"
          >下一首
          </a>
        </div>
        <div class="head">
          <img src="https://p2.music.126.net/9c2LlCW-m3wiubiNid_yQQ==/109951163953123433.jpg?param=34y34">
          <a
            href="/song?id=1354459728"
            hidefocus="true"
            class="mask"
          ></a>
        </div>

        <div class="play">
          <div class="words">
            <a
              hidefocus="true"
              href="/song?id=1354459728"
              class="f-thide name fc1 f-fl"
              title="啊哈"
            >啊哈</a>
            <span class="by">
              <span title="尧洋">
                <a
                  class=""
                  href="/artist?id=31778088"
                  hidefocus="true"
                >尧洋</a>
              </span>
            </span>
            <a
              href="/search/m/?s=%E5%95%8A%E5%93%88&amp;type=1"
              class="src"
              title="来自单曲搜索"
            >
            </a>
          </div>
          <div
            class="m-pbar"
            data-action="noop"
          >
            <div
              class="barbg"
              id="auto-id-Rog0vbmeeVlTLq7I"
            >
              <div
                class="rdy"
                style="width: 30.1818%;"
              >

              </div>
              <div
                class="cur"
                style="width: 0.402809%;"
              >
                <span
                  class="Dong"
                  id="auto-id-6qpBWxT3ITLrP7oX"
                >
                  <i>

                  </i>
                </span>
              </div>
            </div>
            <span class="Ctime">
              <em>00:00</em>/ 03:55
            </span>
          </div>
        </div>
        <div class="oper">
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="like"
            class="icn icn-add j-flag"
            title="收藏"
          >收藏</a>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="share"
            class="icn icn-share"
            title="分享"
          >分享</a>
        </div>

        <div class="ctrl">
          <div
            class="m-vol"
            style="visibility:hidden;"
            id="auto-id-BAPOU4e9udekAb3d"
          >
            <div class="barbg"></div>
            <div
              class="vbg"
              id="auto-id-9dMHLuXltGglnzEU"
            >
              <div
                class="curr"
                style="height: 74.4px;"
              ></div>
              <span
                class="btns"
                style="top: 16.2px;"
              >
              </span>
            </div>
          </div>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="volume"
            class="A1"
          ></a>
          <a
            href="javascript:;"
            hidefocus="true"
            data-action="mode"
            class="A2"
            title="循环"
          >

          </a>
          <span class="add">
            <span
              class="tip"
              style="display:none;"
            >
              已添加到播放列表
            </span>
            <a
              href="javascript:;"
              title="播放列表"
              hidefocus="true"
              data-action="panel"
              class="icn icn-list s-fc3"
            >
              1
            </a>
          </span>
          <div
            class="tip"
            style="display:none;"
          >
            循环
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   isBF:false,
   durationS:0,
   MusicUrl:""
 }),
  created() {
    this.MusicUrl=this.$store.state.musicURL
    this.ceshiLOGIN()
  },
  mounted() {
    // this.MusicUrl=this.$store.state.musicURL
  },
  updated() {
    this.MusicUrl=localStorage.getItem('musicUrl')
  },
  methods: {

    async ceshiLOGIN(){
      const res=await this.Api.cyzApi.ceshiLOGIN()
      console.log(res)
  }
    ,
    guding(){
      var playbarTao=document.querySelector(".playbarTao")
      console.log(playbarTao)
    }
    ,
    BF(){
      console.log(this.$store.state.musicURL)
      this.isBF=!this.isBF
      var plys=document.querySelector(".plys")
      var Cspeed
      var speedS
      var ss=13
      var timer=null
      if(this.isBF){
        var audio = document.querySelector('.Yping')
        this.durationS=audio.duration
        var cur=document.querySelector(".cur")
        plys.style.backgroundPosition="0 -165px";
        console.log(audio.duration)
        Cspeed=100/this.durationS
        speedS=100/this.durationS
        if(!timer){
          audio.play();
          return timer=setInterval(()=>{
          if(!audio.ended){
            
             Cspeed=Cspeed+speedS
             console.log(Cspeed)
          cur.style.width=`${Cspeed}%`
          }
        },1000)
        }
        clearInterval(timer)
         plys.style.backgroundPosition="0 -204px"
      }else if(!this.isBF){
        var audio = document.querySelector('.Yping')
        plys.style.backgroundPosition="0 -204px"
        clearTimeout(timer)
        timer=1
        audio.pause();

    }
    },
    
    mousemove(){
      let playbarTao=document.querySelector(".playbarTao")
      playbarTao.style.top="-7px"
      playbarTao.style.transition="all .2s"
      let timer=setTimeout(()=>{
        clearTimeout(timer)
      },2000)
    },
    xiaoshi(event){
      document.oncontextmenu = function(){return false};
       let timers=setTimeout(()=>{
       clearTimeout(timers)
      let playbarTao=document.querySelector(".playbarTao")
      playbarTao.style.top="40px"
      playbarTao.style.transition="all .5s"
     },500)
    },
    // mouseout(){
    //  let timers=setTimeout(()=>{
    //    clearTimeout(timers)
    //   let playbarTao=document.querySelector(".playbarTao")
    //   playbarTao.style.top="40px"
    //   playbarTao.style.transition="all .5s"
    //  },2000)
    // },
  }
};
</script>
<style lang="less">
.DBbofang{
  .playbarTao{
    top: 40px;
    // top: -7px;
    // transition: all .5s;
    visibility: visible;
    position: absolute;
    zoom: 1;
    left: 0;
    width: 100%;
    height: 53px;
    margin: 0 auto;
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
      .updn{
        position: relative;
        z-index: 11;  
        display: block;
        visibility: visible;
        word-break: break-word;
          .left{
            background: url('../../assets/cyzimgs/DBBF.png');
            position: absolute;
            top: -14px;
            right: 15px;
            width: 52px;
            height: 67px;
            background-position: 0 -380px;
            float: left;
              a{
                background: url('../../assets/cyzimgs/DBBF.png');
                background-position: -80px -380px;
                display: block;
                outline: none;
                cursor: pointer;
                text-decoration: none;
                color: #333;
                width: 18px;
                height: 18px;
                margin: 6px 0 0 17px;
              }
          }
          .right{
            background: url('../../assets/cyzimgs/DBBF.png');
            position: absolute;
            top: -1px;
            right: 0;
            width: 15px;
            height: 54px;
            background-position: -52px -393px;
            pointer-events: none;
            float: left;
          }
      }
      .bg{
        background: url('../../assets/cyzimgs/DBBF.png');
        height: 53px;
        zoom: 1;
        margin-right: 67px;
        background-position: 0 0;
        background-repeat: repeat-x;
      }
      .hand{
        position: absolute;
        top: -10px;
        width: 100%;
        height: 20px;
        cursor: pointer;
        top: -7px;
        visibility: visible;
      }
      .wrap{
        margin-left: -498.5px;
        position: absolute;
        left: 18%;
        top: 6px;
        z-index: 15;
        width: 980px;
        height: 47px;
        margin: 0 auto;
          .btns{
            width: 137px;
            padding: 6px 0 0 0;
            float: left;
            .Yping{
              position: relative;
              left: 100px;
              top: 0px;
              z-index: 10000;
            }


            .prv{
              position: absolute;
              top: 7px;
              left: -38px;
              background: url('../../assets/cyzimgs/DBBF.png');
              background-position: 0 -130px;
              display: block;
              float: left;
              width: 28px;
              height: 28px;
              margin-right: 8px;
              margin-top: 5px;
              text-indent: -9999px;
            }
            .plys{
              position: absolute;
              top: 7px;
              background: url('../../assets/cyzimgs/DBBF.png');
              width: 36px;
              height: 36px;
              margin-top: 0;
              background-position: 0 -204px;
              text-indent: -9999px;
              display: block;
              float: left;
              margin-right: 8px;
              outline: none;
              cursor: pointer;
            }
            .nxt{
              position: absolute;
              top: 7px;
              left: 46px;
              background: url('../../assets/cyzimgs/DBBF.png');
              background-position: -80px -130px;
              display: block;
              float: left;
              width: 28px;
              height: 28px;
              margin-right: 8px;
              margin-top: 5px;
              text-indent: -9999px;
            }
            .prv:hover{
              background-position: -30px -130px;
            }
            .plys:hover{
              background-position: -40px -204px;
            }
            .nxt:hover{
              background-position: -110px -130px;
            }
          }
          .head{
            position: relative;
            margin: 6px 15px 0 0;
            width: 34px;
            height: 34px;
            float: left;
            visibility: hidden !important;
              img{
                width: 34px;
                height: 34px;
                visibility: hidden !important;
                border: 0;
              }
              .mask{
                background: url('../../assets/cyzimgs/DBBF.png');
                position: absolute;
                top: 0px;
                left: 0px;
                display: block;
                width: 34px;
                height: 35px;
                background-position: 0 -80px;
              }
          }
          .play{
            position: relative;
            *zoom: 1;
            width: 608px;
            float: left;
              .words{
                height: 28px;
                overflow: hidden;
                color: #e8e8e8;
                text-shadow: 0 1px 0 #171717;
                line-height: 28px;
                  .f-thide{
                    max-width: 300px;
                    color: #e8e8e8;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    float: left;
                  }
                  .by{
                    max-width: 220px;
                    margin-left: 15px;
                    color: #9b9b9b;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    float: left;
                      span{
                        max-width: 220px;
                        margin-left: 15px;
                        color: #9b9b9b;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        height: 28px;
                        overflow: hidden;
                        text-shadow: 0 1px 0 #171717;
                        line-height: 28px;
                          a{
                            color: #9b9b9b;
                            outline: none;
                            cursor: pointer;
                          }
                      }
                  }
                  .src{
                    float: left;
                    background: url('../../assets/cyzimgs/DBBF.png');
                    width: 14px;
                    height: 15px;
                    text-decoration: none;
                    color: #333;
                    margin: 7px 0 0 13px;
                    background-position: -110px -103px;
                  }
              }
              .m-pbar{
                width: 493px;
                position: relative;
                *zoom: 1;
                  .barbg{
                    background: url('../../assets/cyzimgs/xuebitu17.png');
                    height: 9px;
                    background-position: right 0;
                    width: 493px;
                      .rby{
                        background: url('../../assets/cyzimgs/xuebitu17.png');
                        width: 30.1818%;
                        height: 9px;
                        background-position: right -30px;
                      }
                      .cur{
                        background: url('../../assets/cyzimgs/xuebitu17.png');
                        width: 0.402809%;
                        position: absolute;
                        height: 9px;
                        top: 0;
                        left: 0;
                        background-position: left -66px;
                          span{
                          background: url('../../assets/cyzimgs/xuebitu3.png');
                          text-decoration: none;
                          position: absolute;
                          top: -7px;
                          right: -13px;
                          width: 22px;
                          height: 24px;
                          margin-left: -11px;
                          background-position: 0 -250px;
                            i{
                              visibility: hidden;
                              position: absolute;
                              left: 5px;
                              top: 5px;
                              width: 12px;
                              height: 12px;
                              background: url('../../assets/cyzimgs/JZgif.gif');
                              font-style: normal;
                              text-align: left;
                              font-size: inherit;
                            }
                          }
                      }
                  }
                  .Ctime{
                    position: absolute;
                    top: -3px;
                    right: -84px;
                    color: #797979;
                    text-shadow: 0 1px 0 #121212;
                      em{
                        color: #a1a1a1;
                        font-style: normal;
                        text-align: left;
                        font-size: inherit;
                        position: absolute;                  
                        top: 1px;
                        right: 44px;
                        text-shadow: 0 1px 0 #121212;
                      }
                  }
              }
          }
          .oper{
            width: 60px;
            float: left;
            a:nth-child(1){
              float: left;
              width: 25px;
              height: 25px;
              margin: 11px 2px 0 0;
              text-indent: -9999px;
              background: url('../../assets/cyzimgs/xuebitu18.png');
              background-position: -88px -163px;
              cursor: pointer;
            }
            a:nth-child(2){
              background: url('../../assets/cyzimgs/xuebitu18.png');
              background-position: -114px -163px;
              float: left;
              width: 25px;
              height: 25px;
              margin: 11px 2px 0 0;
              text-indent: -9999px;
            }
          }
          .ctrl{
            position: relative;
            float: left;
            z-index: 10;
            width: 113px;
            padding-left: 13px;
            // background: url('../../assets/cyzimgs/xuebitu18.png');
            background-position: -147px -238px;
              .m-vol{
                visibility: hidden;
                position: absolute;
                top: -113px;
                left: 9px;
                clear: both;
                width: 32px;
                height: 113px;
                  .barbg{
                    background: url('../../assets/cyzimgs/xuebitu18.png');
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 32px;
                    height: 113px;
                    background-position: 0 -503px;
                  }
                  .vbg{
                    padding: 4px 0;
                    top: 7px;
                    position: absolute;
                    display: block;
                    left: 14px;
                    width: 4px;
                    height: 93px;
                      .curr{
                        background: url('../../assets/cyzimgs/xuebitu18.png');
                        height: 74.4px;
                        top: auto;
                        bottom: 4px;
                        left: 0;
                        background-position: -40px bottom;
                        overflow: hidden;
                        position: absolute;
                      }
                      .btns{
                        top: 16.2px;
                        background: url('../../assets/cyzimgs/xuebitu3.png');
                        position: absolute;
                        cursor: pointer;
                        left: -7px;
                        display: block;
                        width: 18px;
                        height: 20px;
                        background-position: -40px -250px;
                      }
                  }
              }
              .A1{
                background: url('../../assets/cyzimgs/xuebitu18.png');
                margin-left: 0px;
                background-position: -2px -248px;
                float: left;
                width: 25px;
                height: 25px;
                margin: 11px 2px 0 0;
                text-indent: -9999px;
                cursor: pointer;
                outline: none;
              }
              .A2{
                background: url('../../assets/cyzimgs/xuebitu18.png');
                margin-left: 0px;
                background-position: -3px -344px;
                float: left;
                width: 25px;
                height: 25px;
                margin: 11px 2px 0 0;
                text-indent: -9999px;
                cursor: pointer;
                outline: none;
              }
              .add{
                float: left;
                width: 59px;
                height: 36px;
                position: relative;
                zoom: 1;
                  .tip{
                    display: none;
                    position: absolute;
                    background: url('../../assets/cyzimgs/xuebitu18.png');
                    top: -51px;
                    left: -65px;
                    clear: both;
                    width: 152px;
                    height: 49px;
                    background-position: 0 -287px;
                    text-align: center;
                    color: #fff;
                    line-height: 37px;
                  }
                  a{
                    display: block;
                    background: url('../../assets/cyzimgs/xuebitu18.png');
                    float: none;
                    width: 38px;
                    padding-left: 21px;
                    background-position: -42px -68px;
                    line-height: 27px;
                    text-align: center;
                    color: #666;
                    text-shadow: 0 1px 0 #080707;
                    text-indent: 0;
                    text-decoration: none;
                    height: 25px;
                    margin: 11px 2px 0 0;
                    cursor: pointer;
                  }
              }
              .tip{
                display: none;
                top: -35px;
                background: url('../../assets/cyzimgs/xuebitu18.png');
                left: 12px;
                width: 81px;
                height: 39px;
                line-height: 34px;
                background-position: 0 -457px;
                position: absolute;
                text-align: center;
                color: #fff;
              }
          }
      }
  }
  // .playbarTao:hover{
  //     top: -7px;
  //     transition: all .2s;
  // }
}
</style>